Shablon ustunlarini o'zlashtirib, CSS Grid qudratini oching. Zamonaviy veb-dizayn uchun moslashuvchan, sezgir va dinamik ustunlar sxemasini yaratishni o'rganing.
CSS Grid Ustunlar Shabloni: Dinamik Ustun Ta'rifini O'zlashtirish
CSS Grid veb-maket sohasida inqilob qilib, misli ko'rilmagan nazorat va moslashuvchanlikni taqdim etdi. Uning asosiy xususiyatlaridan biri grid-template-columns bo'lib, u sizga grid ustunlari tuzilishini belgilash imkonini beradi. Ushbu xususiyatdan samarali foydalanishni tushunish turli ekran o'lchamlari va kontent talablariga moslashadigan sezgir va dinamik maketlarni yaratish uchun juda muhimdir.
grid-template-columns xususiyatini tushunish
grid-template-columns xususiyati grid konteyneridagi ustunlar soni va kengligini belgilaydi. Siz ustun o'lchamlarini turli birliklardan foydalanib belgilashingiz mumkin, jumladan:
- Qat'iy uzunliklar: Piksellar (
px), punktlar (pt), santimetrlar (cm), millimetrlar (mm), dyuymlar (in) - Nisbiy uzunliklar: Em (
em), rem (rem), ko'rish oynasi kengligi (vw), ko'rish oynasi balandligi (vh) - Kasr birligi:
fr(grid konteyneridagi mavjud bo'sh joyning bir qismini ifodalaydi) - Kalit so'zlar:
auto,min-content,max-content,minmax()
Keling, oddiy misoldan boshlaymiz:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Bu kod uchta ustunli grid yaratadi. Birinchi va uchinchi ustunlarning har biri mavjud bo'sh joyning 1/4 qismini egallaydi, ikkinchi ustun esa 2/4 (yoki 1/2) qismini egallaydi.
Qat'iy va Nisbiy Birliklar
Qat'iy va nisbiy birliklar o'rtasida tanlov qilish dizayn maqsadlaringizga bog'liq. Piksellar kabi qat'iy birliklar ustun kengliklari ustidan aniq nazoratni ta'minlaydi, ammo ular maketlarni kamroq moslashuvchan va sezgir qilib qo'yishi mumkin. Boshqa tomondan, nisbiy birliklar ustunlarga ekran o'lchami yoki kontentga mutanosib ravishda o'lchamini o'zgartirish imkonini beradi.
Qat'iy Birliklar (Piksellar): Biror elementning aniq, o'zgarmas o'lchamda bo'lishi kerak bo'lganda piksellardan foydalaning. Bu sezgir grid maketidagi ustunlar uchun kamroq qo'llaniladi, lekin maxsus brending talablariga ega elementlar uchun foydali bo'lishi mumkin. Misol:
.grid-container {
display: grid;
grid-template-columns: 200px 150px 300px;
}
Nisbiy Birliklar (Em, Rem, Ko'rish oynasi birliklari): Bu birliklar ancha moslashuvchan. em va rem shrift o'lchamlariga nisbatan bo'lib, elementlarga yaxshiroq foydalanish imkoniyati uchun matn o'lchami bilan birga o'zgarishga imkon beradi. vw va vh ko'rish oynasi o'lchamiga nisbatan bo'lib, turli ekran o'lchamlariga moslashadigan maketlarni yaratishga imkon beradi. Misol:
.grid-container {
display: grid;
grid-template-columns: 10vw 20vw 70vw;
}
Kasr Birligi (fr)
fr birligi moslashuvchan grid maketlarini yaratish uchun kuchli vositadir. U grid konteyneridagi barcha boshqa qat'iy o'lchamdagi ustunlar hisobga olingandan keyin mavjud bo'sh joyning bir qismini ifodalaydi. Bu qolgan bo'sh joyni mutanosib ravishda taqsimlash uchun ideal qiladi.
Ushbu misolni ko'rib chiqing:
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
}
Bu yerda birinchi ustun 100 piksel kengligida. Qolgan bo'sh joy esa ikkinchi va uchinchi ustunlar o'rtasida bo'linadi, bunda ikkinchi ustun qolgan bo'sh joyning 1/3 qismini, uchinchi ustun esa 2/3 qismini egallaydi.
Kalit so'zlar: auto, min-content, max-content
CSS Grid ustun kengliklarini belgilash uchun bir nechta kalit so'zlarni taqdim etadi:
auto: Brauzer ustun kengligini uning tarkibiga qarab avtomatik ravishda hisoblaydi.min-content: Ustun kengligi uning tarkibini toshib ketmasdan sig'dirish uchun zarur bo'lgan minimal o'lchamga o'rnatiladi. Bu uzun so'zlarni keyingi qatorga o'tkazishni anglatishi mumkin.max-content: Ustun kengligi uning tarkibini keyingi qatorga o'tkazmasdan sig'dirish uchun zarur bo'lgan maksimal o'lchamga o'rnatiladi. Bu, iloji bo'lsa, so'zlarning yangi qatorlarga o'tishini oldini oladi.
auto yordamida misol:
.grid-container {
display: grid;
grid-template-columns: auto 1fr auto;
}
Bu holda, birinchi va uchinchi ustunlar o'z tarkibiga mos ravishda kengligini o'zgartiradi, ikkinchi ustun esa qolgan bo'sh joyni egallaydi.
min-content va max-content yordamida misol:
.grid-container {
display: grid;
grid-template-columns: min-content max-content;
}
Birinchi ustun faqat uning eng kichik kontent qismi talab qilgan darajada keng bo'ladi, ikkinchi ustun esa, iloji bo'lsa, barcha kontentini bir qatorga sig'dirish uchun kengayadi.
minmax() Funksiyasi
minmax() funksiyasi ustun uchun minimal va maksimal o'lchamni belgilash imkonini beradi. Bu mavjud bo'sh joyni to'ldirish uchun kengayishi mumkin bo'lgan, ammo ma'lum bir o'lchamdan kichik bo'lmagan ustunlarni yaratish uchun ayniqsa foydalidir.
Sintaksis:
minmax(min, max)
Misol:
.grid-container {
display: grid;
grid-template-columns: 100px minmax(200px, 1fr) 100px;
}
Ushbu misolda birinchi va uchinchi ustunlar 100 piksel qilib belgilangan. Ikkinchi ustunning minimal kengligi 200 piksel va u qolgan bo'sh joyni to'ldirish uchun kengayishiga imkon beradigan maksimal kenglikka ega. Agar qolgan bo'sh joy 200 pikseldan kam bo'lsa, ikkinchi ustun 200 piksel kengligida bo'ladi va grid toshib ketishi yoki ustunlar mutanosib ravishda qisqarishi mumkin (gridning umumiy cheklovlariga qarab).
repeat() bilan ustun ta'riflarini takrorlash
repeat() funksiyasi takrorlanuvchi ustun naqshlarini belgilashni osonlashtiradi. U ikkita argument qabul qiladi: naqshni takrorlash soni va naqshning o'zi.
Sintaksis:
repeat(number, pattern)
Misol:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Bu kod quyidagiga teng:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Siz repeat() funksiyasini boshqa birliklar va kalit so'zlar bilan birlashtirishingiz ham mumkin:
.grid-container {
display: grid;
grid-template-columns: 100px repeat(2, 1fr 200px) auto;
}
Bu quyidagi ustun tuzilishiga ega grid yaratadi: 100px, 1fr, 200px, 1fr, 200px, auto.
repeat() bilan auto-fill va auto-fit dan foydalanish
repeat() bilan ishlatiladigan auto-fill va auto-fit kalit so'zlari mavjud bo'sh joyga avtomatik ravishda moslashadigan dinamik ustunlar yaratadi. Ular sezgir galereyalar yoki ro'yxatlarni yaratish uchun ayniqsa foydalidir.
auto-fill: Konteynerdan toshib ketmasdan iloji boricha ko'proq ustunlar yaratadi, hatto ba'zi ustunlar bo'sh bo'lsa ham.auto-fit:auto-fillga o'xshaydi, lekin bo'sh ustunlarni 0 kenglikkacha siqib, boshqa ustunlarga mavjud bo'sh joyni to'ldirish uchun kengayish imkonini beradi.
auto-fill yordamida misol:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Bu iloji boricha ko'proq ustunlar yaratadi, har birining minimal kengligi 200 piksel va mavjud bo'sh joyni to'ldirishga imkon beradigan maksimal kenglikka ega. Agar barcha ustunlarni to'ldirish uchun kontent yetarli bo'lmasa, ba'zi ustunlar bo'sh qoladi, lekin ular baribir joy egallaydi.
auto-fit yordamida misol:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Bu auto-fill ga o'xshash ishlaydi, ammo agar bo'sh ustunlar bo'lsa, ular 0 kenglikkacha siqiladi va qolgan ustunlar bo'sh joyni to'ldirish uchun kengayadi. Bu ko'pincha sezgir gridlar uchun kerakli xatti-harakatdir.
Nomlangan Grid Chiziqlari
Siz grid chiziqlariga nomlar berishingiz mumkin, bu kodingizni o'qish va qo'llab-quvvatlashni osonlashtiradi. Bu grid-template-columns (va grid-template-rows) xususiyatini belgilashda nomlarni kvadrat qavslar ichiga olish orqali amalga oshiriladi.
Misol:
.grid-container {
display: grid;
grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}
Ushbu misolda biz birinchi grid chizig'ini col-start, ikkinchi grid chizig'ini col-2 va uchinchi grid chizig'ini col-end deb nomladik. Keyin siz bu nomlardan grid elementlarini grid-column-start, grid-column-end, grid-row-start va grid-row-end xususiyatlari yordamida joylashtirishda foydalanishingiz mumkin.
.grid-item {
grid-column-start: col-start;
grid-column-end: col-2;
}
Bu grid elementini col-start chizig'idan boshlab col-2 chizig'ida tugaydigan qilib joylashtiradi.
Amaliy Misollar va Qo'llash Holatlari
grid-template-columns ni real hayotiy stsenariylarda qanday qo'llash bo'yicha ba'zi amaliy misollar:
1. Moslashuvchan Navigatsiya Paneli
Turli ekran o'lchamlariga moslashadigan navigatsiya paneli:
.navbar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 10px;
}
.logo {
/* Logotip uchun uslublar */
}
.nav-links {
display: flex;
justify-content: space-around;
}
.search-bar {
/* Qidiruv paneli uchun uslublar */
}
@media (max-width: 768px) {
.navbar {
grid-template-columns: 1fr;
}
.nav-links {
flex-direction: column;
}
}
Ushbu misolda, navigatsiya paneli uchta ustunga ega: biri logotip uchun (auto), biri navigatsiya havolalari uchun (1fr) va biri qidiruv paneli uchun (auto). Kichikroq ekranlarda grid bitta ustunga siqiladi va navigatsiya havolalari vertikal ravishda joylashadi.
2. Rasmlar Galereyasi
Moslashuvchan ustunlar soniga ega sezgir rasmlar galereyasi:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
.gallery-item {
/* Galereya elementlari uchun uslublar */
}
Bu kamida 250 piksel kenglikdagi va mavjud bo'sh joyni to'ldirish uchun kengayadigan ustunlarga ega rasmlar galereyasini yaratadi. auto-fit kalit so'zi bo'sh ustunlarning siqilishini ta'minlaydi va rasmlar konteynerni chiroyli tarzda to'ldiradi.
3. Yon Panel bilan Ikki Ustunli Maket
Qat'iy kenglikdagi yon panel va moslashuvchan asosiy kontent maydoniga ega klassik ikki ustunli maket:
.container {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
}
.sidebar {
/* Yon panel uchun uslublar */
}
.main-content {
/* Asosiy kontent uchun uslublar */
}
Yon panelning qat'iy kengligi 250 piksel, asosiy kontent maydoni esa qolgan bo'sh joyni egallaydi.
4. Nomlangan Grid Sohalari bilan Murakkab Maketlar
Murakkabroq maketlar uchun siz grid-template-columns ni grid-template-areas bilan birlashtirib, gridingizning ma'lum sohalarini belgilashingiz mumkin.
.container {
display: grid;
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
}
.header {
grid-area: header;
/* Sarlavha uchun uslublar */
}
.sidebar {
grid-area: sidebar;
/* Yon panel uchun uslublar */
}
.main {
grid-area: main;
/* Asosiy kontent uchun uslublar */
}
.footer {
grid-area: footer;
/* Altbilgi uchun uslublar */
}
Ushbu misol sarlavha, yon panel, asosiy kontent maydoni va altbilgiga ega gridni belgilaydi. grid-template-areas xususiyati ushbu elementlarga ma'lum sohalarni tayinlaydi. Ustun ta'riflari o'qish qulayligini oshirish uchun nomlangan grid chiziqlaridan foydalanadi.
Maxsus Imkoniyatlarni Hisobga Olish
CSS Grid-dan foydalanganda, maxsus imkoniyatlarni hisobga olish juda muhim. Maketlaringiz nogironligi bo'lgan foydalanuvchilar uchun mantiqiy va navigatsiya qilish oson ekanligiga ishonch hosil qiling. Maxsus imkoniyatlarni oshirish uchun semantik HTML elementlaridan foydalaning va tegishli ARIA atributlarini taqdim eting. Masalan, tab tartibiga e'tibor bering va kontent Grid yordamida vizual tarzda qayta tartiblangan bo'lsa ham, mantiqiy tartibda taqdim etilishini ta'minlang.
Ishlash Samaradorligini Optimizatsiya Qilish
CSS Grid odatda yuqori samaradorlikka ega, ammo ishlash samaradorligini optimallashtirish uchun ba'zi narsalarni qilishingiz mumkin:
- Haddan tashqari ichma-ich joylashtirishdan saqlaning: Renderlash xarajatlarini kamaytirish uchun grid tuzilmalaringizni iloji boricha sodda saqlang.
- Uskuna tezlashtirishidan foydalaning: Renderlash samaradorligini oshirish uchun uskuna tezlashtirishini ishga tushiradigan CSS xususiyatlaridan (masalan,
transform: translateZ(0)) foydalaning. - Rasmlarni optimallashtiring: Sahifani yuklash vaqtini qisqartirish uchun rasmlaringiz to'g'ri optimallashtirilganligiga ishonch hosil qiling.
- Turli qurilmalarda sinab ko'ring: Har qanday ishlash muammolarini aniqlash va hal qilish uchun maketlaringizni turli qurilmalar va brauzerlarda sinchkovlik bilan sinab ko'ring.
CSS Grid Maketlarini Tuzatish (Debugging)
Zamonaviy brauzerlar CSS Grid maketlarini tuzatish uchun ajoyib dasturchi vositalarini taqdim etadi. Chrome, Firefox va Edge-da siz grid konteynerini tekshirishingiz va grid chiziqlarini, ustun kengliklarini va qator balandliklarini vizualizatsiya qilishingiz mumkin. Ushbu vositalar maket muammolarini tezda aniqlash va hal qilishga yordam beradi.
grid-template-columns dan foydalanish bo'yicha Eng Yaxshi Amaliyotlar
- Maketingizni rejalashtiring: Kod yozishni boshlashdan oldin, grid maketingizni diqqat bilan rejalashtiring va asosiy sohalarni hamda ularning kerakli o'lchamlarini aniqlang.
- Nisbiy birliklardan foydalaning: Sezgir maketlar yaratish uchun
fr,emvavwkabi nisbiy birliklarni afzal ko'ring. minmax()dan foydalaning: Turli kontent va ekran o'lchamlariga moslashadigan moslashuvchan ustun o'lchamlarini belgilash uchunminmax()funksiyasidan foydalaning.repeat()dan foydalaning: Takrorlanuvchi ustun naqshlarini soddalashtirish uchunrepeat()funksiyasidan foydalaning.- Maxsus imkoniyatlarni hisobga oling: Maketlaringiz barcha foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling.
- Sinchkovlik bilan sinab ko'ring: Maketlaringiz kutilganidek ishlashiga ishonch hosil qilish uchun ularni turli qurilmalar va brauzerlarda sinab ko'ring.
- Toza, qo'llab-quvvatlanadigan kod yozing: Kodingizni o'qish va qo'llab-quvvatlashni osonlashtirish uchun nomlangan grid chiziqlari va izohlardan foydalaning.
Xulosa
grid-template-columns xususiyati moslashuvchan, sezgir va dinamik veb-maketlarni yaratish uchun kuchli vositadir. Mavjud bo'lgan turli birliklar, kalit so'zlar va funksiyalarni o'zlashtirib, siz CSS Gridning to'liq salohiyatini ochishingiz va har qanday ekran o'lchami va kontent talablariga mos keladigan ajoyib veb-dizaynlarni yaratishingiz mumkin. Optimal natijalarga erishish uchun maketlaringizni diqqat bilan rejalashtirishni, nisbiy birliklardan foydalanishni, maxsus imkoniyatlarni hisobga olishni va sinchkovlik bilan sinovdan o'tkazishni unutmang. Ushbu eng yaxshi amaliyotlarga rioya qilish orqali siz barcha foydalanuvchilar uchun ajoyib tajriba taqdim etadigan zamonaviy, qulay veb-saytlarni yaratishingiz mumkin.